<template>
  <div app-component>
    <router-view></router-view>
    <tabbar style="position:fixed" v-if="common.showTabbar">
      <tabbar-item link="/home">
        <x-icon slot="icon" type="ios-paper-outline" size="30"></x-icon>
        <x-icon slot="icon-active" type="ios-paper" size="30"></x-icon>
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item  link="/idea">
        <x-icon slot="icon" type="ios-infinite-outline" size="30"></x-icon>
        <x-icon slot="icon-active" type="ios-infinite" size="30"></x-icon>
        <span slot="label">想法</span>
      </tabbar-item>
      <tabbar-item  link="/market">
        <x-icon slot="icon" type="ios-paw-outline" size="30"></x-icon>
        <x-icon slot="icon-active" type="ios-paw" size="30"></x-icon>
        <span slot="label">市场</span>
      </tabbar-item>
      <tabbar-item badge="2"  link="/message">
        <x-icon slot="icon" type="ios-information-outline" size="30"></x-icon>
        <x-icon slot="icon-active" type="ios-information" size="30"></x-icon>
        <span slot="label">消息</span>
      </tabbar-item>
      <tabbar-item  link="/settings">
        <x-icon slot="icon" type="ios-list-outline" size="30"></x-icon>
        <x-icon slot="icon-active" type="ios-list" size="30"></x-icon>
        <span slot="label">更多</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem, Group, Cell } from 'vux'
import store from '../stores/store'

export default {
  components: {
    Tabbar,
    TabbarItem,
    Group,
    Cell
  },

  computed:{
    common(){
      return store.common;
    }
  }
}
</script>

<style scoped>
[app-component]{
  height: 100%;
  width: 100%;
}
</style>


